﻿<template><!--扫一扫-->
    <div style="height: 100%;width: 100%;overflow: auto;position: absolute">
        <navbar :title="$t('scan_it')"></navbar>
        <div class="content-noBottom" v-if="!result">
            <div id="bcid" ref="bcid">
                <div style="height:100%"></div>
            </div>
        </div>
        <div class="content-noBottom" v-if="result">
            <div style="width: calc(100% - 40px);height: calc(100% - 56px);margin: 20px auto;">
                <!-- 扫码结果 -->
                <v-alert type="info" show-icon>
                    <van-icon name="info-o" slot="icon"/>
                    <template slot>
                        <p> {{ result }} </p>
                    </template>
                </v-alert>
            </div>
        </div>
    </div>
</template>

<script>
import {Notify} from 'vant';
export default {
    name: 'BarcodeScan',
    components: {[Notify.Component.name]: Notify.Component},
    data() {
        return {
            scan: null,
            result: ''
        };
    },
    methods: {
        /**
         * 授权
         */
        onAuthorization() {
            let that = this;
            // 一进来，在顶部出个浮层
            Notify({
                message: that.$t('scan_tips1'),
                color: '#000',
                background: '#fff',
                duration: 'notify'
            });
            // 授权弹框出现 requestPermissions
            window.plus.android.requestPermissions(['android.permission.CAMERA'], function(e) {
                if (e.deniedAlways.length > 0 || e.deniedPresent.length > 0) { // 权限被永久拒绝 || 权限被临时拒绝
                    Notify.clear();
                    // 弹出提示框解释为何需要权限，引导用户打开设置页面开启
                    window.plus.nativeUI.alert(that.$t('scan_tips2'), () => {
                        that.$router.go(-1);
                    });
                }
                if (e.granted.length > 0) { //权限被允许
                    Notify.clear();

                    //自定义的扫描控件样式
                    //扫描控件构造
                    let scan = new window.plus.barcode.Barcode('bcid');
                    //定义识别成功事件
                    scan.onmarked = that.onmarked;
                    //定义开始条码识别
                    scan.start({
                        conserve: true, //是否保存成功扫描到的条码数据时的截图
                        filename: '_doc/barcode/' //保存成功扫描到的条码数据时的图片路径
                    });
                    that.scan = scan;
                }
            }, function(e) {

            });
        },
        /**
         * 扫码成功回调
         * @param type 扫码类型
         * @param result 扫码结果
         */
        onmarked(type, result) {
            // 关闭扫码
            if (this.scan) {
                this.scan.close();
            }
            if (result.includes('http')) {
                if (result.includes('/mobile/#/')) {
                    let path = result.split('/mobile/#/')[1];
                    this.$router.push({path: '/' + path});
                } else {
                    window.location.href = result;
                }
            } else {
                this.result = result;
            }
        },
        /**
         * 返回
         */
        back() {
            if (this.scan) {
                this.scan.close();
            }
            this.$router.go(-1);
        },
        /**
         * 获取微信js-sdk配置
         */
        wxJsSDKConfig() {
            this.$wx.initConfig(['scanQRCode'], location.href.split('#')[0]).then(() => {
                this.$wx.scanQRCode().then(res => {
                    if (res.errMsg) {
                        this.$router.go(-1);
                    } else {
                        if (res.includes('http')) {
                            window.location.href = res;
                        } else {
                            this.result = res;
                        }
                    }
                });
            }).catch(err => {
                alert(this.$t('scan_fail'));
                console.log(err);
                this.$router.go(-1);
            });
        }
    },
    mounted() {
        this.$refs.bcid.style.width = `${window.screen.width}px`;
        this.$refs.bcid.style.height = `${window.screen.height - 56}px`;
        if (window.plus) {
            let cameraPermission = window.plus.navigator.checkPermission('camera');
            if (cameraPermission === 'denied') { //相机权限未获取，请往设置应用程序里面开启权限!
                window.plus.nativeUI.alert(this.$t('scan_tips_11'), () => {
                    this.$router.go(-1);
                });
            } else {
                if (window.plus && window.plus.os.name === 'Android') {
                    console.log('Android');
                    this.onAuthorization();
                } else {
                    console.log('No Android');
                    //自定义的扫描控件样式
                    //扫描控件构造
                    let scan = new window.plus.barcode.Barcode('bcid');
                    //定义识别成功事件
                    scan.onmarked = this.onmarked;
                    //定义开始条码识别
                    scan.start({
                        conserve: true, //是否保存成功扫描到的条码数据时的截图
                        filename: '_doc/barcode/' //保存成功扫描到的条码数据时的图片路径
                    });
                    this.scan = scan;
                }
            }
        } else {
            // 微信扫码
            this.wxJsSDKConfig();
        }
    },
    beforeRouteLeave(to, from, next) {
        if (this.scan) {
            this.scan.close();
        }
        next();
    }
};
</script>

<style scoped lang="less">
    #bcid {
        position: fixed;
        top: 56px;
        z-index: 1;
        width: 320px;
        height: 320px;
    }
    .tip {
        color: #FFFFFF;
        font-weight: bold;
        text-shadow: 0px -1px #103E5C;
    }
</style>
